<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { useBreadcrumbData } from '@/stores/breadcrumb'
  import { doPost } from '@/http/api'
  import { ElMessage } from 'element-plus'
  
  // 面包屑数据
  const breadcrumbList = ref([
    {
      name: '首页',
      routeName: 'homeData'
    },
    {
      name: '共享剪贴板',
      routeName: ''
    },
  ]);

  const breadcrumbDataStore = useBreadcrumbData();
  breadcrumbDataStore.setBreadcrumbData(breadcrumbList);

  const clipboards = ref([]);

  const timeInterval = ref(5);

  const timeIntervalOptions = [
    {
      value: -1,
      label: 'no',
    },
    {
      value: 5,
      label: '5s',
    },
    {
      value: 10,
      label: '10s',
    }
  ];

  const dialogClipboardDataSHowVisible = ref(false);
  const dialogClipboardDataAddVisible = ref(false);
  const concretedClip = ref("");
  let interval = null;

  //----------------------------------------------------------------------------
  // 生命周期函数
  //----------------------------------------------------------------------------
  onMounted(() => {
    getClipboard();

    interval = setInterval(() => {
        getClipboard();
    }, timeInterval.value * 1000);
  })

  onUnmounted(() => {
    if (interval != null) {
      clearInterval(interval);
    }
  })

  //----------------------------------------------------------------------------
  // 业务函数
  //----------------------------------------------------------------------------
  
  function getClipboard() {
    doPost('/dataops/getClipboard', {}).then(res => {
      clipboards.value = res;
    })
  }

  function copy(text){
    // TODO： 对于非https，安全这个api不能使用，后期修复
    navigator.clipboard.writeText(text) // 参数是要写入的文本
    ElMessage({
      type: 'success',
      message: '复制成功'
    });
  }

  function timeIntervalChange() {
    let val = timeInterval.value;
    if (val == -1) {
      clearInterval(interval);
    } else {
      if(interval != null){
        clearInterval(interval);
      }

      interval = setInterval(() => {
        getClipboard();
      }, val * 1000);
    }
  }

  const refresh = () => {
    getClipboard();
  }

  const showClipboardData = (data) => {
    dialogClipboardDataSHowVisible.value = true;
    concretedClip.value = data;
  }

  const openAddClipDialog = () => {
    concretedClip.value = "";
    dialogClipboardDataAddVisible.value = true;
  }

  const addClip = () => {
      doPost('/dataops/addClipboard', {
        text: concretedClip.value,
      }).then(() => {
          ElMessage({
            type: 'success',
            message: '新增成功'
          });
          dialogClipboardDataAddVisible.value = false;
          getClipboard();
      })
  }

</script>

<template>
  <main class="main">
    <div class="flex flex-wrap gap-4 items-center">
      <el-button type="primary" @click="openAddClipDialog">新增</el-button>
      <el-button type="primary" @click="refresh">刷新</el-button>
      <el-select v-model="timeInterval" style="width: 80px" @change="timeIntervalChange">
        <el-option
          v-for="item in timeIntervalOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <div v-if="clipboards != null && clipboards.length > 0">
      <el-scrollbar height="600px">
        <div v-for="item in clipboards" :key="item.key" class="clipBox">
          <div class="clipData" @click="showClipboardData(item.data)">{{ item.data }}</div>
          <el-button type="primary" size="small" class="copy" @click="copy(item.data)"> 复制 </el-button>
        </div>
      </el-scrollbar>
    </div>

    <div v-else>
      <el-empty description="啥也没有，新增一个吧" />
    </div>

    <!-- 剪贴板内容对话框 -->
    <el-dialog v-model="dialogClipboardDataSHowVisible" title="剪贴板内容" width="800">
      <el-input v-model="concretedClip" type="textarea" disabled :autosize="{ minRows: 1, maxRows: 20 }"></el-input>
    </el-dialog>

    <!-- 新增剪贴板内容对话框 -->
    <el-dialog v-model="dialogClipboardDataAddVisible" title="新增剪贴板" width="800">
      <el-input v-model="concretedClip" placeholder="请输入内容" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogClipboardDataAddVisible = false">取消</el-button>
          <el-button type="primary" @click="addClip">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </main>
</template>

<style scoped>
  .clipBox {
    height: 36px;
    margin: 10px;
    border: solid 1px #999;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .clipBox .clipData {
    margin-left: 6px;
    flex: 1;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .copy{
    margin-right: 6px;
  }
</style>